﻿<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>

<template>
  <div class="contain">
    <header class="friend_header">
      <div class="header_name">知己好友</div>

      <!--<input type="text" placeholder="学校/id/性别/备注" class="header_search"/>-->
    </header>
    <div class="nav">
      <div v-bind:class="{nav_act:nav_a_list[0]}" v-on:click="nav_click(0)">知己</div>
      <div v-bind:class="{nav_act:nav_a_list[1]}" v-on:click="nav_click(1)">好友</div>
      <div v-bind:class="{nav_act:nav_a_list[2]}" v-on:click="nav_click(2)">关注</div>
    </div>
    <!-- list s -->

  <!-- list e -->
    <!-- main s -->
    <div class="main" ref="main"  v-bind:style="{ height: main_height + 'px'}">
     <div class="friend_box" v-for="(list,index) in show_list_list">
       <div class="friend_box_header">
         <img v-bind:src="list.image|judge_and_add_Base"  class="friend_box_img" />
         <ul class="friend_box_name">
           <li>ID:{{list.ident}}</li>
           <li>{{list.penName}}</li>
         </ul>

         <div class="wrap_select_ad_list">
           <img src="../../static/img/walala.jpg" class="arrow_l" data-id="list.id" v-on:click="arrow_l">
           <ul class="list_ul" style="display:none">
             <li class="list_btn_b" v-on:click="ajax(list.id,1)">
               屏蔽
             </li>
             <li class="list_btn_b" v-on:click="ajax(list.id,2)">
               删除关注
             </li>
             <li class="list_btn_b" v-on:click="ajax(list.id,3)">
               +好友
             </li>
             <li class="list_btn_b" v-on:click="ajax(list.id,4)">
               +知己
             </li>
             <!--<li class="list_btn_b" v-on:click="ajax(list.id,5)">
               私信
             </li>-->
           </ul>
       </div>

       </div>
       <scroll :card_mess = "list.adventurecards" @slider_box_click="go_to" :msg="list.adventurecards" :index="index">
       </scroll>
     </div>
    <!-- main e -->
     <FooterMenu ref="footer"></FooterMenu>
   </div>
    </div>
</template>
<script>
import FooterMenu from "../index/FooterMenu.vue"
import '../../static/css/reset.css'
import MintUI from 'mint-ui'
import { Toast, Indicator, MessageBox } from 'mint-ui';
import "../../static/css/container/container.css"
import '../../static/css/mint-ui/style.css'
import VueScroller from 'vue-scroller'
import qs from 'qs';
import common from "../common/common.js";
import Vue from "vue";
import scroll from "../swiper/seed_slider_muitiple/seed_slider_m.vue"
import filter from "../filter/filter.js"//filter
import axios from 'axios'
axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
Vue.prototype.$http = axios;

/*iscroll s*/
import N_Iscroll from "iscroll";
/*iscroll e*/
import useRem from '../../static/js/use_rem.js';
Vue.use(MintUI);
useRem();
Vue.use(VueScroller);
//Vue.use(IscrollView, N_Iscroll);

export default {
  name: 'hello',
  data () {
    return {
      nav_a_list: [true, false, false],
      item_list: [],
      list_ul_show: false,
      show_list_list: [],
      main_height:"",
      base_url:"",
      is_app:""
    }
  },
  mounted: function () {

    ///api/user / friends / getFriendsByPrimaryId
    this.get_data(0)

  },
  methods: {
    go_to:function (id,mess,index) {
      sessionStorage.setItem("nav_id", id);
      sessionStorage.setItem("now_List", JSON.stringify(mess));
      //是app的话
      if(this.is_app) sessionStorage.setItem("ad_visit_user_img",this.show_list_list[index].image);

      this.$store.dispatch("thom_redirect",
          { name: "/Adventure_visit", router: this.$router });
    },
    get_data: function (sel) {
      Indicator.open();
      console.log("get_data")
      this.is_app = common.is_app(this);
      let user_id  = location.search.split("user_id=")[1];
      sessionStorage.setItem("user_id",user_id)
      let term;
      if (sel == 0) {
        term = "我的知己"
      } else if (sel == 1) {
        term = "我的好友"
      } else if (sel == 2) {
        term = "我的关注"
      }
      console.log(this.$http)
      console.log(this.$http.post)
      this.$http.post(this.base_url+'/yizhiweimen/api/user/adventurecard/GettingCardInformation',
        qs.stringify(
          {
            'term': term,
            "uid": user_id,
            "pageNo": 1,
            "pageSize": 100
          })
      )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          Indicator.close();
          //记录id
          //this.qs_list = e.dataarrow_
          let e_data_len = e.data.length;
          for (let x = 0; x < e_data_len; x++) {
            for (let y = 0; y < e.data[x].adventurecards.length; y++) {
              if (y == 1) {
                e.data[x].adventurecards[y].act = true
              } else if (e.data[x].adventurecards.length == 1) {
                e.data[x].adventurecards[0].act = true
              } else {
                e.data[x].adventurecards[y].act = false
              }
            }
          }
          this.card_list = e.data;
          this.show_list_list = e.data;

          this.$nextTick(() => {
            let main = this.$refs.main;

            let main_top = main.getBoundingClientRect().top;//main 距离上面的 高度
            let body_top = document.body.clientHeight;//body 的高度

            let cover_height = document.getElementsByClassName("bottom_bg_cover")[0];
            let footer_height = window.getComputedStyle(cover_height, null).getPropertyValue("height").replace("px", "");
            this.main_height = body_top - main_top - footer_height

          })

        })
    },
    ajax: function (id, sel) {
      let user_id =  location.search.split("user_id=")[1];
      let url,obj_ajax;
      Indicator.open();
      if (sel == 4) {//添加知己
        url =this.base_url+ "/yizhiweimen/api/user/adventurecard/addBosomFriend"
        obj_ajax = {
          "uid": user_id,
          "friend":id
        }
      } else if (sel == 3) {//添加好友
        url = this.base_url+"/yizhiweimen/api/user/friends/AddFriend"
        obj_ajax = {
          'primaryUser.id': user_id,
          "friendUser.id":id
        }
      } else if (sel == 2) {//删除好友
        url = this.base_url+"/yizhiweimen/api/user/friends/DeleteFriend"
        obj_ajax = {
          "uid": user_id,
          "friendId":id
        }
      } else if (sel == 1) {//屏蔽好友
        url =this.base_url+ "/yizhiweimen/api/user/adventurecard/shield"
        obj_ajax = {
          "uid": user_id,
          "blockedUser":id
        }

      }

      this.$http.post(url,
        qs.stringify(
          obj_ajax
        )
         )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          Indicator.close();
          //记录id
          //this.qs_list = e.dataarrow_l
        Toast({
          message: e.data,
          position: 'bottom',
          duration: 2000
        });
        this.get_data(sel);
          console.log("data_________________")
          console.log(e.data)
        })
    },
    arrow_l: function (event) {
      let list = event.currentTarget.nextElementSibling;
      //console.log(event.currentTarget.nextElementSibling)
      //this.list_ul_show = !this.list_ul_show;
      let id = event.currentTarget.getAttribute("data-id");
      if (list.style.display == "none") {
        list.style.display = "block"
      } else {
        list.style.display = "none"
      }
    },
    nav_click: function (id) {
      console.log(id)
      for (let x = 0; x < this.nav_a_list.length; x++) {
        this.nav_a_list[x]=false
      }
      this.nav_a_list[id] = true;
      this.$set(this.nav_a_list, id, true);
      this.get_data(id)
    }
  },
  components: {
    FooterMenu,
    scroll
  }
}
</script>
<style scoped>
  .main{
    overflow:scroll;
  }
  .move_l {
    left: -2vw;
  }
  .move_r {
    right: -2vw;
  }
  .wrapper {
    background-color: rgba(201, 199, 199, 0.5);
  }
  /*friend_box s*/
  .friend_box_name li {
    margin-top: 3vw;
    display: block;
    line-height: 1;
  }
  .friend_box_name {
    font-size: 3vw;
    color: #9f5c2f;
    text-align: left;
  }
  .friend_box_img {
    width: 13.8vw;
    height: 13.8vw;
    border-radius: 50%;
    margin-top: 1vw;
    margin-bottom: 1vw;
    margin-left: 5.6vw;
  }
  .friend_box_header {
    height: 15.3vw;
    line-height: 15.3vw;
    border-bottom: 2px solid #ededed;
    display: flex;
    justify-content: flex-start;
  }
  .friend_box {
    width: 95vw;
    height: 57vw;
    background-color: #fff;
    margin: 2vw auto;
    border-radius: 2vw;
    box-shadow: 0 0 6px 2px #eee;
  }
  /*friend_box e*/
  /*arrow ss*/
  .list_ul {
    position: absolute;
    z-index: 100;
    top: 10vw;
    font-size: 3.8vw;
    left: -8vw;
    line-height:1;
  }
  .wrap_select_ad_list {
    position: relative;
    margin-left:47vw;
  }
  .list_btn_b {
    border-radius:1vw;
    margin-top:2vw;
    width: 16vw;
    height: 7vw;
    line-height: 7vw;
    text-align: center;
    color: #fff;
    background-color: #e54d4c
  }
  .arrow_l {
    width: 4.5vw;
    height: 2.5vw;
    /*margin-right:5vw;*/
    /*margin-top:3vw;*/
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    right:5vw;
  }
  /*arrow e*/
  .contain {
    background: none;
    background-color: #eee;
  }
  .nav_act{
     color:#e5814d;
  }
  .nav {
    color: #b2b2b2;
    font-size:4vw;
    line-height:8vw;
    display:flex;
    height:8vw;
    background-color:#fff;
    justify-content:space-around;
  }
  .friend_header {
    display: flex;
    height: 10.9vw;
    background-color: #fff;
    color: #000;
    width: 100%;
    font-size: 5vw;
    text-align: left;
    line-height: 10.9vw;
  }
  .header_name{
    /*padding-left:10vw;*/
    color:#b2b2b2;
    position: absolute;
    left:50%;
    transform: translateX(-50%);
  }
  .header_search{

  }
  /*ad_list_box s*/
  /*ad_main s*/
  .ad_list_main {
    width: 88vw;
    height: 32.8vw;
    margin: 1.8vw auto 0;
    border: 1px solid #9f5c2f;
    overflow: scroll;
  }
  /*ad_main e*/
  .guanz_btn {
    font-size:4vw;
    padding-left: 2.6vw;
    padding-right: 2.6vw;
    height: 6vw;
    color: #fff;
    background-color: #9f5c2f;
    line-height: 6vw;
    border: 2px solid #9f5c2f;
    border-radius: 1vw;
    margin-top: 3vw;
    margin-left: 1.4vw;
  }

  .add_f_btn {
    padding-left: 2.6vw;
    padding-right: 2.6vw;
    color: #9f5c2f;
    border: 2px solid #9f5c2f;
    border-radius: 1vw;
    line-height: 1;
    font-size: 3.7vw;
    height: 6vw;
    line-height: 6vw;
    margin-top: 3vw;
    margin-left: 11.7vw;
  }

  .ad_header_user_id {
    font-size: 3.7vw;
    color: #9f5c2f;
    padding-top: 6vw;
  }

  .header_user_img {
    width: 8.6vw;
    height: 8.6vw;
    border-radius: 1vw;
    border: 1px solid #9f5c2f;
    margin-top: 1.3vw;
    margin-left: 3vw;
    margin-right: 2vw;
  }

  .ad_list_header {
    display: flex;
    width: 100%;
    height: 11.7vw;
    justify-content:space-between;
  }

  .ad_list_box {
    width: 92vw;
    height: 48.8vw;
    background-color: #fff;
    border: 1px solid #9f5c2f;
    border-radius: 2vw;
    margin: 2vw auto 0;
    box-shadow: 0 0px 8px 4px rgba(201, 199, 199, 0.5);
  }

  .wrap_scroller {
    height: 100%;
    margin-top: 11.7vw;
  }

  #scroller {
    margin-top: 14vw;
  }
  /*ad_list_box e*/
</style>

